<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="ljc">
    <title></title>
    <script src="js/jquery-3.1.1.js">
        
    </script>
    <style>
    body{
        background-color: gray;
    }
        main{
            width: 500px;
            margin: 20px auto;
        }
        .div1{
            padding: 5px;
            text-align: center;
            width: 220px;
            margin: 10px auto;
            background-color: #fff;
            font-size: 8px;
            border:3px solid transparent;
            box-sizing: border-box;
            
        }
        .div1:hover{
            animation: animate 2s linear;
            animation-fill-mode:forwards;
        }
        @keyframes animate{
            0%{
                border-color:white;
            }     
            100%{
                border-color: orangered;
            }
        }
        img:nth-child(1){
            width: 100%;
        }
        p{
            line-height: 2;
            text-align: justify;
          margin: 10px;
        }

        .div2{
            width: 230px;
            overflow: hidden;
            padding: 0;
            height: 112px;
            margin: 10px auto;
            background-color: #fff;
        }
        .div2 figure{
            height: 110px;
           margin: 2px;
           padding: 5px;  
           box-sizing: border-box;
           float: left;        
           width: 110px;
           position: relative;
           overflow: hidden;
        }
        figure>img{
            height: 100%;
        }
      figcaption{
          width: 100px;
          position: absolute;
          top:5px;
          height: 100px;
         background-color: gray;
         left:-105px;
         opacity: 0.8;
         color: whitesmoke;
      }
      figcaption>p{
          width: 70px;
          font-size:8px;
      }
    </style>
</head>
<body>
    <main>
        <div class="div1">
            <img src="3.png" alt="">
            <p><strong>【金熹】 </strong>设计上运用了多片层叠设计，形成立体倒放的花苞视觉效果，创意独特，浓烈的印花明快的色彩勾勒出美妙的夏日异国情调，优质雪纺面料让小衫更显质感穿着凉爽透气，做工也相当讲究。</p>
        </div>
        <div class="div2">
            <figure>
                   <img src="1.png" alt="">
                   <figcaption>
                       <p>银饰</p>
                       <p>设计上运用了多片层叠设计，效果，创意独特</p>
                   </figcaption>
            </figure>
            <figure>
                <img src="2.png" alt="">
                <figcaption>
                    <p>服装</p>
                    <p>优质雪纺面料让小衫更显质感穿着凉爽透气，讲究</p>
                </figcaption>
            </figure>
            
        </div>
    </main>
</body>
</html>
<script>
$('figure').each(function(){
     $(this).mouseenter(function(){
        $(this).find('figcaption').animate({
            left:5,
          
        });
    })
     $(this).mouseleave(function(){
        $(this).find('figcaption').animate({
        left:-($(this).width()),
        });
    })
})
   
  
</script>